import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Select, message } from 'antd';
import {DICT} from '../enum';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelect } from '@/components/DropDownSelect/index';

const Option = Select.Option;

interface Props {
  form: any,
  dispatch?: Function,
  getMonthList?: Function,
  initCurrent: Function,
  dict?: any
}

const FormItem = Form.Item;

@connect(({ analyse_check }) => ({
  dict: analyse_check.dict
}))
class Search extends Component<Props, any> {

  state = {
    yearList: [],
    year: null,
    compareYear: null
  };

  initCurrent = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if(!values.compareMonth || !values.month) {
          message.warning('请选择完整后操作');
          return;
        }
        const {dict} = this.props;
        values.year = this.state.year;
        values.compareYear = this.state.compareYear;
        this.props.initCurrent(values);
        this.props.getMonthList(dict['report.compare.month']);
      }
    });
  };

  getYearData = (value, type) => {
    if(type === 'year') {
      this.setState({
        year: value
      })
    }
    if(type === 'compareYear') {
      this.setState({
        compareYear: value
      })
    }
  };

  getYear = () => {
    let newYear = new Date().getFullYear();
    let yearList = [];
    for(let i = 1; i < 12; i ++) {
      yearList.push({
        name: `${newYear}年`,
        value: newYear
      });
      newYear --;
    }
    this.setState({
      yearList,
      year: yearList[0].value,
      compareYear: yearList[0].value
    })
  };

  getOption = (type) => {
    if(this.state.yearList.length === 0) {
      return null;
    }
    return (
      <Select defaultValue={this.state.yearList[0].value} style={{'width': '160px'}} onChange={(value) => {this.getYearData(value, type)}}>
        {
          this.state.yearList.map((item, index) => (
            <Option value={item.value} key={`${index}`}>{item.name}</Option>
          ))
        }
      </Select>
    )
  };

  componentDidMount() {
    const { dispatch, form } = this.props;
    this.getYear();
    const month = (new Date().getMonth() + 1).toString();
    let items = {
      month,
      compareMonth: month
    };
    form.setFieldsValue(items);
    dispatch({
      type: 'analyse_check/queryDict',
      payload: {keyList: DICT}
    })
  }

  render() {
    const { dict = {} } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <SearchRow stype={{'position': 'relative'}}>
          <SearchCol key={0}>
            <FormItem
            >
              {this.getOption('year')}
            </FormItem>
          </SearchCol>
          <SearchCol key={1}>
            <FormItem
            >
              {getFieldDecorator('month')(
                DropDownSelect(dict, 'report.compare.month', '', '160px', '月份')
              )}
            </FormItem>
          </SearchCol>
          <b style={{'fontSize': '20px', 'paddingTop': '5px'}}>：</b>
          <SearchCol key={3}>
            <FormItem
            >
              {this.getOption('compareYear')}
            </FormItem>
          </SearchCol>
          <SearchCol key={4}>
            <FormItem
            >
              {getFieldDecorator('compareMonth')(
                DropDownSelect(dict, 'report.compare.month', '', '160px', '对比月份')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={5}>
            <SearchButton onClick={() => {this.initCurrent()}}>对比</SearchButton>
            <SearchButton onClick={() => {
              this.props.form.resetFields();
            }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create()(Search);
export default SearchS;
